:root {
  --primary-color: #fff;
  --secondary-color: #f5f5f5;
  --border-color: #e0e0e0;
  --button-hover-color: #f6f6f6;
  --button-active-color: #f0f0f0;
  --text-color: #333;
  --icon-color: #757575;
  --icon-active-color: #757575;
  --left-panel-width: 300px;
}

.pdf-marking {
  // Vars

  // Support

  // Module
  & {
    //
    height: 100%;
    width: 100%;


    .Button {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      min-width: 46px;
      height: 46px;
      padding: 6px;
      font-size: 16px;
      cursor: pointer;

      &:hover:not(.disable) {
        background-color: #f6f6f6 !important;
        background-color: var(--button-hover-color) !important;
      }

      &.active:not(.disable) {
        background: #f0f0f0 !important;
        background: var(--button-active-color) !important;
      }

      &.down-arrow:after {
        content: "";
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 6px solid #757575;
        border-top: 6px solid var(--icon-color);
      }

      &.hasStyles.active:after {
        position: absolute;
        right: 0;
        bottom: 0;
        display: block;
        content: "";
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-bottom: 8px solid #757575;
        border-bottom: 8px solid var(--icon-color);
      }
    }

    .pdf-marking-content {
      height: 100%;
      width: 100%;
      position: relative;
      display: flex;
      flex-direction: column;
      user-select: none;
      -webkit-font-smoothing: antialiased;
      background: #f5f5f5;

      div {
        box-sizing: border-box;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
      }

      .Icon {
        width: 24px;
        height: 24px;
        pointer-events: none;
        color: #757575;
        color: var(--icon-color);

        svg {
          grid-column: 2/3;
          justify-self: center;
          cursor: pointer;

          path:not([fill=none]),
          polygon#Triangle {
            fill: currentColor;
          }

          &:not(:root) {
            overflow: hidden;
          }
        }
      }

      .toolbox-box {
        height: 47px;
        background: #fff;
        background: var(--primary-color);
        border-bottom: 1px solid #e0e0e0;
        border-bottom: 1px solid var(--border-color);
        transition: all .3s ease;
        overflow: hidden;

        .toolbox-items {
          height: 100%;
          display: flex;
          flex-direction: row;
          align-items: center;
          overflow-x: auto;
          overflow-y: hidden;

          > * {
            flex-shrink: 0;
          }

          .zoomOverlayButton {
            display: flex;
            align-items: center;

            .OverlayText {
              margin-right: -8px;
              font-size: 16px;
              font-weight: 400;
              height: 46px;
              line-height: 46px;
              text-align: center;
              display: flex;
              z-index: 1;

              input[type=text] {
                resize: none;
                border: none;
                outline: none;
                color: inherit;
                background-color: transparent;
                font-size: 16px;
                margin-top: -2px;
                margin-right: 2px;
                width: 42px;
                height: 47px;
                line-height: 42px;
                text-align: right;
                user-select: text !important;
              }

              span {
                display: flex;
              }
            }

            &:hover:not(.disable) {
              background-color: #f6f6f6;
              background-color: var(--button-hover-color);
            }

            &.active:not(.disable) {
              background: #f0f0f0;
              background: var(--button-active-color);
            }
          }

          .divider {
            width: 1px;
            height: 50%;
            margin: 0 10px;
            background: #e0e0e0;
            background: var(--border-color);
          }
        }
      }

      .DocumentContainerBox {
        position: relative;
        width: 100%;
        flex: 1;
        height: 0;
        display: flex;
        flex-direction: column;

        &.right-panel {
          width: calc(100% - 300px);
        }

        &.left-panel {
          margin-left: calc(var(--left-panel-width) + 20px);
          width: calc(100% - var(--left-panel-width) - 20px);
        }

        &.left-panel.right-panel {
          width: calc(100% - 300px - var(--left-panel-width) - 20px);
          margin-left: calc(var(--left-panel-width) + 20px);
        }
      }

      .DocumentContainer {
        height: 0;
        flex: 1;
        width: 100%;
        display: flex;
        flex-direction: column;
        //width: 100%;
        //height: 100%;
        overflow: auto;
        transition: all .3s ease;
        user-select: none;

        .document {
          margin: auto;
          outline: none;
          -webkit-tap-highlight-color: transparent;
          display: flex;
          flex-direction: column;
          //pointer-events: none;

          .pageSection {
            flex-shrink: 0;

            .pageContainer {
              background-color: #fff;
              position: relative;
              overflow: hidden;
              box-shadow: 0 0 2px 0 rgba(0, 0, 0, .14), 0 2px 2px 0 rgba(0, 0, 0, .12), 0 1px 3px 0 rgba(0, 0, 0, .12);

              .auxiliary {

              }

              .hacc {

              }

              .pageDebuggerInfo {
                position: absolute;
                top: 0;
                left: 0;
                z-index: 50;
              }

              &.loading {

              }
            }

            &__watermark {
              position: absolute;
              pointer-events: none !important;
              left: 0;
              top: 0;
              right: 0;
              bottom: 0;
              display: flex;
              align-items: center;
              justify-content: center;
              overflow: hidden;

              * {
                pointer-events: none !important;
              }
            }
          }

        }
      }

      .Panel {

        &.LeftPanel {
          position: absolute;
          top: 47px;
          z-index: 65;
          display: flex;
          flex-direction: column;
          height: calc(100% - 47px);
          background: #f5f5f5;
          background: var(--secondary-color);
          //transition: transform .3s ease, visibility 0s ease .3s;

          width: 300px;
          width: var(--left-panel-width);
          left: 0;
          border-right: 1px solid #e0e0e0;
          border-right: 1px solid var(--border-color);

          .left-panel-header {
            display: flex;
            align-items: center;
            margin: 16px;

            .LeftPanelTabs {

              flex: 1;
              display: flex;
              height: 30px;
              border-radius: 4px;
              border: 1px solid #e0e0e0;
              border: 1px solid var(--border-color);
              overflow: hidden;

              .Button {
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;
                min-width: 46px;
                //height: 46px;
                padding: 6px;
                font-size: 16px;
                cursor: pointer;

                flex-grow: 1;
                background: #fff;
                background: var(--primary-color);
                height: 100%;
                margin: 0;

                .Icon {
                  width: 19px;
                  height: 19px;
                }
              }
            }
          }

          .resize-bar {
            cursor: col-resize;
            right: 0;
            margin-right: -20px;
            width: 20px;
            height: 100%;
            margin-bottom: 0;
            //background-color: red;
            position: absolute;
            z-index: 100;
          }

          .Panel {
            overflow: auto;
            -webkit-overflow-scrolling: touch;
            flex: 1;
            flex-direction: column;

            &.ThumbnailsPanel {
              overflow: hidden !important;
              display: flex;

              .virtualized-thumbnails-container {
                flex: 1;
                height: 0;
                display: flex;
                flex-wrap: wrap;
                overflow-y: auto;
                align-items: center;
                justify-content: center;
                //align-items: center;

                .Thumbnail {
                  display: flex;
                  flex-direction: column;
                  //justify-content: center;
                  align-items: center;
                  //height: calc(100% - 5px);
                  margin: 2.5px 0;
                  font-size: 12px;
                  text-align: center;
                  cursor: pointer;
                  padding-bottom: 20px;

                  .container {
                    position: relative;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin: 13px 10px 5px;

                    width: 150px;
                    height: 150px;

                    .thumbnail {

                    }
                  }

                  .page-label {
                    margin-top: 5px;
                  }

                  &:hover {
                    background-color: #e6e6e6;
                  }

                  &.active {
                    background-color: #d3d3d3;
                  }
                }
              }
            }

            &.NotesPanel {

              overflow: hidden !important;
              padding: 8px 0;
              display: flex;

              .normal-notes-container {
                margin-top: 10px;
                flex: 1;
                overflow: auto;

                .note-wrapper {
                  .ListSeparator {
                    font-size: 14px;
                    margin: 10px 0 10px 10px;
                    user-select: none;
                  }

                  .Note {
                    width: 100%;
                    margin-top: -1px;
                    padding: 10px;
                    border: 1px solid #e0e0e0;
                    border: 1px solid var(--border-color);
                    font-size: 13px;
                    background: #fff;
                    background: var(--primary-color);
                    cursor: pointer;

                    .NoteContent {
                      .title {
                        position: relative;
                        display: flex;
                        align-items: center;
                        flex: 1;
                        color: grey;
                        color: var(--text-color);
                        margin-bottom: 3px;

                        .type {
                          display: flex;
                          align-items: center;
                          height: 20px;
                          //padding-right: 10px;
                          font-weight: 700;
                        }

                        .spacer {
                          //opacity: .8;
                          height: 1px;
                          width: 7px;
                          //flex: 1;
                          margin: 0 5px;
                          background: grey;
                          background: var(--text-color);
                          opacity: .5;
                        }

                        .time {
                          opacity: .8;
                        }

                        .fill-width {
                          flex: 1;
                        }

                        .del-btn {
                          overflow: hidden;
                          display: flex;
                          align-items: center;
                          height: 20px;
                          //padding-right: 10px;
                          font-weight: 700;
                        }
                      }

                      .content-container {
                        padding-top: 3px;
                        cursor: auto;
                        //white-space: pre-wrap;
                        color: var(--text-color);
                        margin-right: 5px;
                        padding: 0;
                        word-wrap: break-word;
                        user-select: text;

                        //.container {
                        //  .contents {
                        //    color: var(--text-color);
                        //    margin-right: 5px;
                        //    padding: 0;
                        //    word-wrap: break-word;
                        //    user-select: text;
                        //
                        //  }
                        //}
                      }
                    }
                  }
                }

                .no-data {
                  height: 100%;
                  width: 100%;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                }
              }
            }
          }
        }

        &.SearchPanel {
          position: absolute;
          top: 47px;
          z-index: 65;
          display: flex;
          flex-direction: column;
          height: calc(100% - 47px);
          background: #f5f5f5;
          background: var(--secondary-color);
          transition: transform .3s ease, visibility 0s ease .3s;

          //width: 300px;
          width: 0;
          right: 0;
          padding: 10px 5px;
          border-left: 1px solid #e0e0e0;
          border-left: 1px solid var(--border-color);

          .results {
            flex: 1;
            overflow-y: auto;
            padding: 10px;
            margin-top: 80px !important;
            width: 290px;

            &.wild-card-visible {
              margin-top: calc(110px - 63px) !important;
            }

            .info {

            }

            .result-page-item {
              .ListSeparator {
                font-size: 14px;
                margin: 10px 0 10px 10px;
                user-select: none;
              }

              .SearchResult {
                margin-top: -1px;
                padding: .625rem;
                box-sizing: border-box;
                font-size: .9375rem;
                cursor: pointer;
                background: #fff;
                background: var(--primary-color);
                border: 1px solid #e0e0e0;
                border: 1px solid var(--border-color);
                word-wrap: break-word;

                .search-value {
                  background: #fffc95;
                  color: #333;
                }

                &.selected {
                  background: #e6e6e6;
                  color: #333;

                  .search-value {
                    background: #fbcd9f;
                  }
                }
              }
            }
          }

          &.open {
            width: 300px;
          }
        }

        &.open {
          transform: none;
          visibility: visible;
          transition: transform .3s ease, visibility 0s ease 0s;
        }

        &.closed {
          visibility: hidden;
        }
      }

      .Overlay {
        &.PageNavOverlay {
          position: absolute;
          z-index: 85;
          display: flex;
          flex-wrap: wrap;
          background: #fff;
          background: var(--primary-color);
          padding: 5px;
          border: 1px solid #e0e0e0;
          border: 1px solid var(--border-color);
          border-radius: 10px;
          bottom: 10px;
          left: 10px;
          padding: 10px;
          font-size: 16px;
          cursor: pointer;
          transition: all .3s ease;

          input {
            padding: 0;
            border: none;
            text-align: right;
            font-size: 16px;
            background: transparent;
            color: var(--text-color);
            cursor: text !important;
            user-select: text !important;
            -webkit-appearance: none;
          }

          &.shifted {
            transform: translateX(calc(var(--left-panel-width) + 20px + 10px));
          }
        }

        &.SearchOverlay {
          position: absolute;
          z-index: 85;
          //flex-wrap: wrap;
          background: #fff;
          background: var(--primary-color);
          //padding: 5px;
          border: 1px solid #e0e0e0;
          border: 1px solid var(--border-color);
          border-radius: 10px;
          right: 16px;
          top: 46px;
          width: 280px;
          padding: 15px;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          flex-wrap: nowrap;

          .wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;

            .main {
              display: flex;
              width: 100%;

              .input-wrapper {
                flex: 1;

                input[type=text] {
                  width: 100%;
                  height: 30px;
                  padding: 0 5px;
                  border-top-left-radius: 5px;
                  border-bottom-left-radius: 5px;
                  border-top-right-radius: 0;
                  border-bottom-right-radius: 0;
                  outline: none;
                  border: 1px solid #e0e0e0;
                  border-right: none;
                  box-sizing: border-box;
                  font-size: 1em;
                }
              }

              .number-of-results {
                display: flex;
                align-items: center;
                height: 30px;
                font-size: 12px;
                color: #cdcdcd;
                border: 1px solid #e0e0e0;
                border-left: none;
                background: #fff;

                div {
                  padding-right: 5px;
                }
              }

              .button {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 30px;
                height: 30px;
                border: 1px solid #e0e0e0;
                border: 1px solid var(--border-color);
                border-left: 0;
                background: #f5f5f5;
                background: var(--secondary-color);
                cursor: pointer;

                .Icon {

                }

                &.previous {
                }

                &.next {
                }
              }

              .advanced {
                display: flex;
                justify-content: flex-end;
                align-items: center;
                width: 32px;
                transition: all .2s ease;

                .Icon {
                  transform: rotate(90deg);
                  transition: opacity .2s ease;
                }
              }
            }
          }

          &.transformed {
            right: 0;
            width: 300px;
            border-color: transparent;
            border-radius: 0;
            background-color: transparent;
            transition: all .3s ease, background-color .3s ease .2s, border-color .3s ease .2s;

            .wrapper {
              .advanced {
                width: 0;
                opacity: 0;
                z-index: -1;
              }
            }
          }
        }

        &.ZoomOverlay {
          position: absolute;
          z-index: 100;
          box-shadow: 0 0 2px 0 rgba(0, 0, 0, .14), 0 2px 2px 0 rgba(0, 0, 0, .12), 0 1px 3px 0 rgba(0, 0, 0, .12);

          .OverlayItem {
            min-width: 146px;
            min-height: 35px;
            background-color: #fff;
            background-color: var(--primary-color);
            color: #333;
            color: var(--text-color);
            font-size: 16px;
            font-weight: 400;
            cursor: pointer;

            .ButtonText {
              line-height: 2.4;
              margin: 0 19px;
            }

            &:hover {
              background-color: #f6f6f6;
              background-color: var(--button-hover-color);
            }
          }

          .spacer {
            height: 1px;
            background: #f0f0f0;
            background: var(--button-active-color);
          }
        }

        &.open {
          opacity: 1;
          //transition: opacity 1s 2s;
        }

        &.closed {
          visibility: hidden;
          opacity: 0;
        }
      }


      .Popup {
        position: absolute;
        z-index: 85;

        &.StylePopup {
          display: flex;
          flex-direction: column;
          width: 256px;
          border-radius: 4px;
          overflow: auto;
          box-shadow: 1px 2px 10px 1px rgba(0, 0, 0, .05);
          z-index: 80;
          user-select: none;

          > * {
            margin: 0;
            padding: 0;
            font-size: 14px;
            color: rgba(0, 0, 0, .54);
          }

          .colors-container {
            background-color: #fafafa;
            box-shadow: inset 0 -1px rgba(0, 0, 0, .12);
            border-collapse: separate;

            .inner-wrapper {
              margin: 16px;

              .stylePopup-title {
                margin-top: -4px;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .palette-title {

                }

                .palette {
                  display: flex;
                  justify-content: space-between;

                  .palette-item {
                    height: 32px;
                    width: 40px;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    border-bottom: 2px solid transparent;
                    overflow: hidden;
                    cursor: pointer;

                    &.stroke {
                      > div {
                        border-radius: 50%;
                        width: 18px;
                        height: 18px;
                        border-width: 4px;
                        border-style: solid;

                        > div {
                          height: 100%;
                          width: 100%;
                          position: relative;
                          border-radius: 50%;
                          border: 1px solid #dbdbdb;
                        }
                      }
                    }

                    &.fill {
                      > div {
                        border-radius: 50%;
                        width: 18px;
                        height: 18px;
                        overflow: hidden;

                        > div {
                          height: 100%;
                          width: 100%;
                          position: relative;
                          border-radius: 50%;
                          border: 1px solid #dbdbdb;

                          &::after {
                            content: '';
                            background-color: red;
                            height: 1px;
                            width: 100%;
                            top: 50%;
                            position: absolute;
                            transform: rotate(-45deg);
                          }
                        }
                      }
                    }

                    &.text {
                    }

                    &.selected {
                      font-weight: 700;
                      border-bottom: 2px solid #00a5e4;
                    }
                  }
                }
              }

              .ColorPalette {
                margin-top: 6px;
                display: flex;
                flex-wrap: wrap;
                justify-content: center;

                .cell {
                  position: relative;
                  justify-content: center;
                  align-items: center;
                  border-radius: 1px;
                  border: 1px solid transparent;
                  cursor: pointer;
                  width: 30px;
                  height: 26px;
                  display: flex;
                  margin: 1px;

                  .check-mark {
                    width: 20px;
                    height: 20px;

                    &.dark {
                      color: rgba(0, 0, 0, .54);
                    }
                  }
                }

                //.dummy-cell {
                //  width: 30px;
                //  height: 26px;
                //  display: flex;
                //  margin: 1px;
                //}
              }
            }
          }

          .sliders-container {
            background-color: #fff;

            .sliders {
              margin: 12px 16px;
              overflow: hidden;

              .slider-item {
                display: grid;
                grid-template-columns: auto 1fr 33px;
                grid-auto-rows: 32px;
                grid-column-gap: 5px;
                align-items: center;

                .slider__property {
                  grid-column: 1/2;
                  justify-self: start;
                }

                .slider__value {
                  grid-column: 3/4;
                  justify-self: end;
                }
              }
            }
          }
        }

        &.TextPopup {
          position: absolute;
          z-index: 60;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 5px;
          border-radius: 5px;
          box-sizing: border-box;
          background: #fff;
          background: var(--primary-color);
          box-shadow: 1px 1px 10px #aaa;
        }

        &.ContextMenuPopup {
          position: absolute;
          z-index: 60;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 5px;
          border-radius: 5px;
          box-sizing: border-box;
          background: #fff;
          background: var(--primary-color);
          box-shadow: 1px 1px 10px #aaa;
        }

        &.AnnotationPopup {
          position: absolute;
          z-index: 60;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 5px;
          border-radius: 5px;
          box-sizing: border-box;
          background: #fff;
          background: var(--primary-color);
          box-shadow: 1px 1px 10px #aaa;
        }

        &.closed {
          visibility: hidden;
        }

        &.open {
          visibility: visible;
        }
      }

      .Modal {
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 100;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: hsla(0, 0%, 100%, .8);

        .container {
          background: #fff;
          background: var(--primary-color);
          box-shadow: 1px 1px 5px #000;
          border-radius: 5px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          padding: 10px;
        }

        &.LoadingModal {
          .inner-wrapper {
            margin: 10px;
            border: 5px solid #eee;
            border-top-color: #aaa;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1.2s ease infinite;

            @keyframes spin {
              0% {
                transform: rotate(0deg);
              }
              100% {
                transform: rotate(1turn);
              }
            }
          }
        }

        &.ProgressModal {
          .progress-bar-wrapper {
            width: 250px;
            height: 10px;
            background: #ededed;
            overflow: hidden;

            .progress-bar {
              position: relative;
              height: 10px;
              background: #00a5e4;
              overflow: hidden;
            }
          }
        }

        &.open {
          opacity: 1;
          //transition: opacity 1s 2s;
        }

        &.closed {
          visibility: hidden;
          opacity: 0;
        }
      }

    }


  }

  // Facets


  // States
}
